<template>
  <div>
    <base-layout :visibleContent3="true">
      <template #searchPanel>
        <el-form :inline="true" :model="fromdata" label-width="110px">
          <el-row>
            <el-col :span="16">退货基础信息</el-col>
            <el-col :span="8">
              <el-button
                v-if="fromdata.status === '新建退货单'"
                type="success"
                @click="checkStatus('开始退货')"
                >开始退货</el-button
              >
              <el-button
                v-else-if="fromdata.status === '退货中'"
                type="success"
                @click="checkStatus('退货完成')"
                >退货完成</el-button
              >
              <el-button type="danger">打印退货单</el-button>
            </el-col>
          </el-row>
          <el-divider content-position="center"></el-divider>
          <el-row>
            <el-col :span="6">
              <el-form-item label="退货编号:">
                <div>{{ fromdata.returnCode }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单据日期:">
                <div>{{ fromdata.returnReceiptsTime }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="退货供应商:">
                <div>{{ fromdata.returnSupplierName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="供应商联系人:">
                <div>{{ fromdata.returnSupplierUserName }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="供应商联系方式:">
                <div>{{ fromdata.returnSupplierPhone }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="退货备注:">
                <div>{{ fromdata.returnRemark }}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #contentPanel>
        <el-form :inline="true" :model="fromdata" label-width="110px">
          <el-row>
            <el-radio-group v-model="user">
              <el-radio-button label="1">采购人员</el-radio-button>
              <el-radio-button label="2">退货负责人</el-radio-button>
            </el-radio-group>
          </el-row>
          <el-divider content-position="center"></el-divider>
          <el-row v-if="showUser">
            <el-col :span="6">
              <el-form-item label="采购人员:">
                <div>{{ fromdata.purchaseUserName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系方式:">
                <div>{{ fromdata.purchasePhone }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="!showUser">
            <el-col :span="6">
              <el-form-item label="退货负责人:">
                <div>{{ fromdata.returnUserName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系方式:">
                <div>{{ fromdata.returnPhone }}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #contentPanel3>
        <el-form :inline="true" :model="fromdata" label-width="110px">
          <el-row>
            <el-col :span="12">退货进度</el-col>
          </el-row>
          <el-divider content-position="center"></el-divider>
          <Steps
            v-if="setpsList != null && setpsList.length > 0"
            :setpsList="setpsList"
          />
        </el-form>
      </template>
    </base-layout>
  </div>
</template>

<script>
import baseMixin from '@/mixins/base'
import { Steps } from '@/components/index'
import {
  updateStatus,
  getDetail,
} from '@/api/after-sale/purchaseManage/purchaseReturn'
export default {
  name: 'editClientManage',
  components: { Steps },
  props: {
    fromdata: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    fromdata: function (value) {
      this.setpsList = value.statusList
    },
    user: function (value) {
      if (value === '1') {
        this.showUser = true
      } else {
        this.showUser = false
      }
    },
  },
  mixins: [
    baseMixin({
      format(res) {
        return res.map((data) => {
          return data
        })
      },
    }),
  ],
  data() {
    return {
      setpsList: null,
      user: '1',
      showUser: true,
    }
  },
  methods: {
    checkStatus(status) {
      let from = {
        id: this.fromdata.id,
        status: status
      }
      updateStatus(from).then((res) => {
        let { success } = res
        if (success) {
          this.$message.success('操作成功')
          getDetail(this.fromdata.id).then((res) => {
            let { success, data } = res
            this.fromdata = data
          })
        }
      })
    },
  },
  created() {
    this.setpsList = this.fromdata.statusList
  },
}
</script>

<style lang="scss" scoped>
.el-table .delete-row {
  background: #f5f7fa;
  color: #ccc !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
